<template>
    <div class="p-search">
        <div class="m-pannel">
        <header class="m-header-search">
            <router-link class="u-backlink" to="/home">返回</router-link>
                <van-search
                    class="u-serach"
                    v-model="value"
                    placeholder="请输入会议名称"
                    @search="onSearch"
                    v-focus
                    >
                    <div slot="left-icon"></div>
                    <div class="back" slot="action" @click="onSearch" size='40px'>搜索</div>
                </van-search>
        </header>
        <main>
            <template v-if="!judge">
                <div class="tipTab">
                    <!--<h1>你可以搜索</h1>-->
                    <!--<div class="isIcon">-->
                        <!--<p>会议名称</p>-->
                    <!--</div>-->
                    <svg class="icon-meeting" viewBox="0 0 1024 1024"><path d="M247.9488 262.4c63.6608 0 115.456-51.6736 115.456-115.2S311.6096 32 247.9488 32c-63.6672 0-115.456 51.6736-115.456 115.2s51.7824 115.2 115.456 115.2z m0-192c42.4384 0 76.9664 34.4512 76.9664 76.8s-34.5344 76.8-76.9664 76.8c-42.4448 0-76.9728-34.4512-76.9728-76.8s34.528-76.8 76.9728-76.8z m577.2864 192c63.6608 0 115.456-51.6736 115.456-115.2s-51.7952-115.2-115.456-115.2-115.456 51.6736-115.456 115.2 51.7952 115.2 115.456 115.2z m0-192c42.4512 0 76.9664 34.4512 76.9664 76.8s-34.5216 76.8-76.9664 76.8-76.9728-34.4512-76.9728-76.8 34.5216-76.8 76.9728-76.8z m122.4896 258.176c-9.0816-15.5904-23.9616-28.6656-40.8384-35.8784a18.8352 18.8352 0 0 0-6.7008-1.4784c-20.032-6.9952-58.6688-10.5344-115.488-10.5344-5.856 0-26.5472 1.2992-45.4656 5.8944-0.3008 0.064-0.6016 0.064-0.9088 0.1408-0.6336 0.1664-1.2544 0.3776-1.8816 0.5568-9.3568 2.464-17.9776 5.7984-23.9424 10.2336-15.6032 9.0432-27.8144 21.3696-32.1216 33.5104-8.9152 18.2464-44.1792 91.0976-53.376 118.7456-10.9504 8.224-46.0736 30.4128-63.8144 41.6256-16.4544 10.3808-23.5072 14.8672-26.5984 17.1008-3.072-2.2272-10.0928-6.688-26.496-17.0496-17.7792-11.2192-52.9664-33.4528-63.9104-41.6896-9.2352-27.712-44.4672-100.4864-53.3696-118.7264-4.3072-12.1344-16.5056-24.4672-32.1088-33.5104-5.9776-4.448-14.6368-7.7888-24.0192-10.2592-0.6144-0.1792-1.216-0.3776-1.8304-0.5376-0.3008-0.0832-0.6016-0.0832-0.9024-0.1472-18.9248-4.5888-39.6224-5.888-45.472-5.888-56.8512 0-95.4944 3.5392-115.5136 10.5344a19.1552 19.1552 0 0 0-6.6816 1.4784c-16.8832 7.2192-31.7632 20.2944-40.8256 35.8848-6.7584 11.6032-65.9776 114.2656-68.0064 148.4416-0.8192 14.2016 8.2048 30.8864 25.568 61.5808 12.7552 22.5536 30.2272 53.44 30.2272 67.3664 0 48.1152 24.48 59.3152 45.8816 59.936-5.184 127.808-15.8464 205.0752-20.5568 239.3152-0.96 6.9568-1.6896 12.2048-2.0992 15.8464-2.3296 21.0176 2.784 39.712 14.4 52.6656 10.3744 11.5712 24.896 17.6832 41.9648 17.6832 20.6208 0 40.0384-12.9536 50.5152-31.1808a50.8352 50.8352 0 0 0 9.1072 15.4304c6.5152 7.4432 18.496 16.3328 38.6176 16.3328 45.3056 0 54.5472-37.0688 59.3152-56.416 18.272-111.776 27.552-278.5984 30.8352-406.0224 31.1808 24.96 96.5504 59.0272 97.3824 59.4304 15.3664 7.5008 29.312 11.2512 41.7536 11.2512 5.8112 0 11.2896-0.8384 16.4416-2.4768a53.6192 53.6192 0 0 0 16.192 2.5152c12.352 0 26.1376-3.7504 41.6256-11.3088 0.7872-0.3968 66.1632-34.4448 97.3376-59.3856 3.3024 127.488 12.6336 294.5728 31.136 407.5392 4.4352 17.8112 13.6896 54.88 59.0144 54.88 20.128 0 32.096-8.8704 38.592-16.3136a50.4512 50.4512 0 0 0 9.12-15.4496c10.4832 18.208 29.8944 31.1616 50.5088 31.1616 17.0816 0 31.6032-6.112 41.984-17.6832 11.6096-12.9344 16.7232-31.648 14.4-52.6528-0.416-3.6352-1.1328-8.8896-2.0864-15.8464-4.7232-34.2272-15.3728-111.5008-20.5888-239.3344 21.4016-0.6208 45.92-11.8016 45.92-59.936 0-13.9136 17.4592-44.7744 30.1952-67.3152 17.3888-30.7328 26.4-47.4304 25.5616-61.6512-1.984-33.3376-56.992-129.4592-67.9936-148.4096z m-634.9952 599.2832c-5.7984 23.2064-9.5104 25.7408-21.6576 25.7408-6.8352 0-8.8512-2.304-9.6-3.168-3.264-3.7312-4.5888-11.776-3.3728-20.4928 12.4032-89.9072 16.4672-183.1296 12.096-277.0688-0.48-10.24-10.208-18.2976-20.4864-18.2976a19.2256 19.2256 0 0 0-19.168 17.5104c-12.256 138.3552-37.0816 275.6032-37.3376 276.9728a19.776 19.776 0 0 0-0.288 2.6048c-0.4096 9.4144-9.9456 21.3568-20.0768 21.3568-5.984 0-10.3296-1.5936-13.28-4.896-4.16-4.6336-5.92-12.9536-4.832-22.816 0.3904-3.392 1.0752-8.3264 1.9648-14.848 5.0432-36.4864 16.6848-121.2288 21.6128-262.4384 6.4896-8.8 11.1616-21.792 11.1616-41.216 0-10.6688-3.7824-24.3456-9.2352-39.2576 0.2304-16.928 0.352-34.4128 0.3648-52.6016a22.208 22.208 0 0 0 0.3456-3.5456V423.5136h-0.032a19.1616 19.1616 0 0 0-8.6016-16.0064 19.2576 19.2576 0 0 0-26.6688 5.4016l-9.728 14.5664c-18.5792 27.7888-25.28 38.0352-27.5008 43.9232a21.2352 21.2352 0 0 0-0.6144 1.9008c-3.4816 13.3696 3.4688 30.208 19.5456 67.0144 9.984 22.8352 23.6288 54.112 23.6288 66.4896 0 20.7744-6.4128 20.7744-9.8624 20.7744-4.8256 0-9.376 0-9.376-21.6 0-24.0192-17.8944-55.648-35.1872-86.2336-7.9232-14.0032-19.8912-35.168-20.672-40.48 1.0176-16.9728 37.1648-87.2128 62.8544-131.3984 1.856-3.1744 8.9344-13.9776 22.7136-19.872a19.0208 19.0208 0 0 0 7.4624-5.8176l0.7552 0.5632c-2.4192 3.2256-5.0496 4.352-5.1136 4.3776 6.9504-2.8864 47.6096-8.032 103.9232-8.032 12.5248 0 27.3216 2.528 37.6256 5.1264 2.9568 0.8512 5.7088 1.8816 8.3008 3.0272 3.3088 12.4032 9.7536 44.032 9.7536 102.0544 0.0128 122.9056-8.4416 357.5424-31.4176 498.5664zM528.256 559.648c-0.3392 0.16-0.6656 0.3456-0.992 0.5248-4.7424 2.56-13.3824 3.296-31.7248-5.6704-14.4704-7.104-86.8928-48.4928-95.1104-57.9776-1.3248-2.624-4.6592-8.6016-18.0096-29.7984 0.1536-13.3504 0.2304-25.8944 0.2304-37.4464 0-11.4496-0.2496-21.9008-0.6592-31.5456 14.1312 30.3616 26.6944 58.816 28.416 66.5728 2.2272 9.9328 2.5088 11.2064 79.0976 59.5712 12.256 7.744 22.016 13.8752 24.4672 15.6544 3.6928 2.8032 6.624 5.5488 8.9408 8.1024 0.2048 0.2048 0.352 0.4416 0.5632 0.64l0.0192 0.0128c3.7376 4.2432 5.7216 7.8656 6.4192 10.0544-0.48 0.4544-1.0304 0.896-1.6576 1.3056z m162.5088-92.9216c-14.88 23.6352-17.152 28.1408-17.0304 28.2368-9.1904 11.0528-81.6128 52.4352-96.064 59.5264-3.2576 1.5872-6.272 2.8672-9.1264 3.9488-0.0256-0.8064 0.0768-1.5808 0-2.3936-0.608-6.1568-2.688-12.48-6.0288-18.7264 4.4352-2.8928 12.1536-7.744 21.248-13.4848 76.48-48.3072 76.7616-49.5744 79.0272-59.5456 1.7088-7.7376 14.2784-36.1984 28.4096-66.56a741.7152 741.7152 0 0 0-0.6592 31.5648c-0.0064 11.5456 0.0704 24.0832 0.224 37.4336z m265.856 53.0368c-17.2864 30.5792-35.1552 62.1952-35.1552 86.1952 0 21.6-4.544 21.6-9.376 21.6-3.6864 0-9.8688 0-9.8688-20.7936 0-12.3776 13.6448-43.6288 23.6224-66.4512 16.064-36.8256 23.04-53.664 19.5456-67.0336-0.1664-0.64-0.384-1.2672-0.608-1.8752-2.2144-5.92-8.96-16.2304-27.6608-44.192l-9.5808-14.336a19.2384 19.2384 0 0 0-35.2512 10.6368h-0.0512l0.0384 89.0496a18.56 18.56 0 0 0 0.32 2.4384c0 18.1888 0.128 35.6672 0.3584 52.5888-5.44 14.8864-9.2096 28.5312-9.2096 39.1744 0 19.4112 4.6656 32.4096 11.1488 41.2096 4.9216 141.2224 16.5824 225.9968 21.6064 262.4832 0.9024 6.528 1.5808 11.456 1.9584 14.848 1.1072 9.8624-0.6592 18.1696-4.8128 22.8032-2.9504 3.3024-7.3152 4.896-13.3056 4.896-10.1248 0-19.6544-11.9424-20.0704-21.3568a20.7744 20.7744 0 0 0-0.2816-2.6048c-0.2624-1.3696-25.088-138.5408-37.3568-276.9728-0.8832-9.92-10.432-17.5104-20.4032-17.5104a19.232 19.232 0 0 0-19.2256 18.2976c-4.384 93.92-0.3008 187.1424 12.1024 277.0496 1.2032 8.7552-0.1344 16.8192-3.3792 20.5504-0.768 0.864-2.7648 3.1488-9.6 3.1488-12.1792 0-15.9936-3.04-21.3312-24.2048-23.3024-142.5536-31.7568-377.1968-31.7568-500.1088 0-58.1184 6.4768-89.76 9.728-102.048 2.6176-1.152 5.3824-2.1952 8.3648-3.0528 10.304-2.592 25.0816-5.1072 37.5808-5.1072 56.3008 0 96.9664 5.1456 103.8976 8.032-0.0384-0.0192-2.688-1.1648-5.1264-4.4032l0.768-0.5696c1.9328 2.4576 4.416 4.5312 7.4944 5.8496a49.7984 49.7984 0 0 1 22.7008 19.872c29.6192 50.9376 61.9392 115.8848 62.8608 130.4768-0.7808 6.2592-12.7488 27.4176-20.6848 41.4208z" /></svg>
                </div>
            </template>
            <template v-else>
                <div class="resultTab">
                    <h1 class="resultListTitle">相关会议</h1>
                    <p>List Conference</p>
                    <p>相关会议数目：{{swipersData.length}}</p>
                    <ul>
                        <li class="resultItem" :key='guide.id' v-for="guide in swipersData">
                            <router-link :to="{path:'/officer',query:{ id:guide.id }}">
                                <!--<div class="thumb">-->
                                    <!--<img class="u-logo" :src="guide.logo" alt="logo">-->
                                <!--</div>-->

                                <!--<div class='text'>-->
                                    <!--<p class="title">{{guide.title}}</p>-->
                                    <!--<p class="content">{{guide.meeting_details}}</p>-->
                                <!--</div>-->
                                <div class="thumb">
                                    <div class='text'>
                                        <div class="logo">
                                            <img src="@/common/image/LOGO.png">
                                        </div>
                                        <p class="title">{{guide.title}}</p>
                                    </div>
                                    <img class="u-logo" :src="guide.cover_image" alt="网络错误或图片丢失">
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </template>
        </main>
        </div>
    </div>
</template>

<style lang="scss" src='./index.scss' scoped></style>

<script>
import { Indicator,Toast } from 'mint-ui';
import { GetSearch } from '@/api/http.js'
export default {
    //操作DOM是为了解决定位问题。
    mounted(){
        setTimeout(()=>{
            document.querySelector(".m-list").style.display = 'none'
        },500)
    },
    beforeDestroy(){
        document.querySelector(".m-list").style.display = 'block'
    },
    data:function(){
        return {
            top:'',
            value: null, //输入关键词获取
            judge: false,
            swipersData: [],
            formatData:[]
        }
    },
    methods:{
        //无输入返回直接关闭搜索页面
        onBack(){
            this.$emit('closeSearch')
        },
        //点击搜索后，把value值传递给父组件，并通过toggleCall事件关闭
        onSearch(){
            if(!this.value) return
            this.judge = false
            GetSearch({search:this.value})
            .then(res=>{
                this.judge = true
                this.swipersData = res
            })
        }
    },
    //自定义指令，聚焦input
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
            el.querySelector('input').focus()
            }
        }
    }
}
</script>
<style>
    .p-search .van-field__control{font-size: 0.4rem;border: none!important;
        width: 100% !important;padding:0!important;text-align: left;background: transparent!important;}

    .van-field__body i{font-size: 0.4rem;}
    .u-serach{
        flex-grow: 1;
        box-sizing: border-box;
        height: 60px;
        border-radius: 8px;
        line-height: 1rem;
        background: #fff!important;
        overflow: hidden;
    }
    .u-serach .back{
        font-size: 28px;
        padding: 0 10px;
    }
</style>
